<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>边缘计算平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
</head>
<body>

<form class="layui-form layui-fluid" action="">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>规则信息</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">规则名称</label>
        <div class="layui-input-inline">
            <input type="text" name="ruleName" lay-verify="title" autocomplete="off" placeholder="请输入规则名称"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">初始状态</label>
        <div class="layui-input-inline">
            <select name="ruleStatus" lay-filter="aihao">
                <option value="" selected=""></option>
<!--                <option value=1 >开启</option>-->
                <option value=0>关闭</option>
            </select>
        </div>
    </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">规则描述</label>
            <div class="layui-input-block">
                <textarea name="ruleDescribe"placeholder="请输入规则描述" class="layui-textarea"></textarea>
            </div>
        </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>规则指令</legend>
    </fieldset>
<!--    <div class="layui-form-item">-->
<!--        <label class=" layui-form-label">数据格式</label>-->
<!--        <div class=" layui-input-inline">-->
<!--            <input type="radio" name="ruleFormat" value="Json" title="Json" checked="">-->
<!--            <input type="radio" name="ruleFormat" value="二进制" title="二进制">-->
<!--        </div>-->
<!--    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">对应设备</label>
        <div class="layui-input-inline">
            <select name="ruleToDevice" id="ruleToDevice" lay-filter="required">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">设备功能</label>
        <div class="layui-input-inline">
            <select name="rulePara" id="rulePara" lay-filter="aihao">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">规则条件</label>
        <div class="layui-input-inline">
            <select name="ruleJudge" lay-filter="aihao">
                <option value="" selected=""></option>
                <option value=2> > </option>
                <option value=1> < </option>
                <option value=0> = </option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">参数门限</label>
        <div class="layui-input-inline">
            <input type="text" name="ruleParaThreshold" lay-verify="title" autocomplete="off" placeholder="请输入门限"
                   class="layui-input">
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>规则功能</legend>
    </fieldset>

    <div class="layui-form-item">
        <label class="layui-form-label">执行功能</label>
        <div class="layui-input-inline">
            <select name="ruleExecute" lay-filter="aihao">
                <option value="" selected=""></option>
                <option value=1> 警告日志 </option>
                <option value=0> 关闭设备 </option>
                <option value=2> 强制赋值 </option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="display: none">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="formVerify">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['form', 'layedit', 'layer'], function () {

        var form = layui.form;
        var pa;

        //动态加载对应设备
        $ = layui.jquery;
        $(document).ready(function() {
            var ha = sessionStorage.getItem("deviceNames");
            pa = JSON.parse(ha);
            for(ka=0;ka<pa.length;ka++){
                var option = document.createElement("option");  // 创建添加option属性
                option.setAttribute("value",pa[ka].productName); // 给option的value添加值
                option.innerText=pa[ka].productName;     // 打印option对应的纯文本
                ruleToDevice.appendChild(option);           //给select添加option子标签
                //console.log(pp[ka].productName);
            }
            form.render();            // 显示出数据

            //动态加载设备功能
            var hh1 = sessionStorage.getItem("functionNames");
            var pp1 = JSON.parse(hh1);
            for(k=0;k<pp1.length;k++){
                var option = document.createElement("option");  // 创建添加option属性
                option.setAttribute("value",pp1[k].functionName); // 给option的value添加值
                option.innerText=pp1[k].productName+"的"+pp1[k].functionName;     // 打印option对应的纯文本
                rulePara.appendChild(option);           //给select添加option子标签
                //console.log(pp1[k].productName);
            }
        });
        layui.use('form', function(){  //此段代码必不可少
            var form = layui.form;
            form.render("select");
        });

        //监听提交
        form.on('submit(formVerify)', function (obj) {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var layedit = layui.layedit;
            var data = JSON.stringify(obj.field);
            var url = "/api/ruleCreate";
            var code = 0;

            layui.jquery.ajax({
                type: "post",
                url: url,
                async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                data: data,
                contentType: "application/json",
                // processData: false,
                // cache: false,
                success: function (ev) {
                    code = ev.code;
                }

            });
            if (code == 500) {
                console.log("提交失败");
            }

            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            parent.layer.close(index);

            // 刷新表格（即点击分页控件的“确定”按钮）
            parent.layui.table.reload("ruleTable");

        });

        // //监听提交
        // form.on('submit(formVerify)', function (data) {
        //
        //     var data = JSON.stringify(data.field);
        //
        //     var url = "/api/rule";  //请求数据api
        //
        //     var code = 0;
        //     layui.jquery.ajax({
        //         type: "post",
        //         url: url,
        //         async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
        //         data: data,
        //         contentType: "application/json",
        //         // processData: false,
        //         // cache: false,
        //         success: function (ev) {
        //             code = ev.code;
        //         }
        //     });
        //     if (code == 500) {
        //         console.log("提交失败");
        //     }
        //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //
        //     parent.layer.close(index);
        //
        //     // 刷新表格（即点击分页控件的“确定”按钮）
        //     parent.layui.table.reload("ruleTable");
        // });
    });
</script>
</html>